<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../react18/react.development.js"></script>
  <script src="../react18/react-dom.development.js"></script>
  <script src="../react18/babel.min.js"></script>
  <script src="../react18/prop-types.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    // 非受控表单
      // class App extends React.Component{
      // render(){
      //   return (
      //       <div>
      //         姓名： <input type="text" ref={c=>this.nameEle=c}  />
      //         年龄   <input type="text" ref={c=>this.ageEle=c}/>
      //         爱好    <input type="text" ref={c=>this.hobbyEle=c}/>
      //         <br/>
      //               <button onClick={this.handle}>提交</button> 
      //       </div>
      //   )
      // }
      // handle=()=>{
      // const name=this.nameEle.value
      // const age=this.ageEle.value
      // const hobby=this.hobbyEle.value
      //   console.log(name,age,hobby);
      // }

      // }
      // const root=ReactDOM.createRoot(document.getElementById("app"))
      // root.render(<App/>)

// 受控表单

// class App extends React.Component{
//   state={
//     name:"laowang",
//     age:18,
//     hobby:"吃饭"
//   }
//   render(){
//     const{name,age,hobby}=this.state
//     return (
//     <div>
//             姓名 <input type="text" value={name} onChange={this.changeName}/>
//             <br/>
//             年龄 <input type="text" value={age} onChange={this.changeAge}/>
//             <br/>
//             爱好<input type="text" value={hobby} onChange={this.changeHobby}/>
//             <br/>
//             <button onClick={this.handle}>提交</button>  
//       </div>
//     )
//   }
// changeName=(e)=>{
//   const {value}=e.target
//   this.setState({name:value})
// }
// changeAge=(e)=>{
// const {value}=e.target
// this.setState({age:+value})
// }
// changeHobby=(e)=>{
//   const {value}=e.target
// this.setState({hobby:value})
// }

// handle=()=>{
//   const {name,age,hobby}=this.state
//   console.log(name,age,hobby);
// }
// }

// const root=ReactDOM.createRoot(document.getElementById("app"))
// root.render(<App/>)

    //  class App extends React.Component{
    //    state={
    //     name:"laowang",
    //     age:18,
    //     hobby:"烫头"
    //    }
    //    render(){
    //      const {name,age,hobby}=this.state
    //      return(
    //       <div>
    //         姓名: <input type="text" value={name} onChange={this.changeName} />
    //         <br/>
    //         年龄: <input type="text" value={age} onChange={this.changeAge} />
    //         <br/>
    //         爱好: <input type="text" value={hobby} onChange={this.changeHobby} />  
    //         <br/>
    //         <button onClick={this.handle}>提交</button>  
    //       </div>
    //      )
    //    }
    //   changeName=(e)=>{
    //     const{value}=e.target
    //     this.setState({name:value})
    //   }

    //     changeAge = (e) => {
    //     const {value} = e.target;
    //     this.setState({age: +value})
    //   }
    //   changeHobby = (e) => {
    //     const {value} = e.target;
    //     this.setState({hobby:value})
    //   }

    //   handle=()=>{
    //     const{name,age,hobby}=this.state
    //     console.log(name,age,hobby);
    //   }

    //  }



    class App extends React.Component{
       state={
        name:"laowang",
        age:18,
        hobby:"烫头"
       }
       render(){
         const {name,age,hobby}=this.state
         return(
          <div>
            姓名: <input type="text" value={name} onChange={this.changeFrom("name")} />
            <br/>
            年龄: <input type="text" value={age} onChange={this.changeFrom("age")} />
            <br/>
            爱好: <input type="text" value={hobby} onChange={this.changeFrom("hobby")} />  
            <br/>
            <button onClick={this.handle}>提交</button>  
          </div>
         )
       }
      changeName=(type)=>{
       return(e)=>{
        const {value}=e.target.value
        this.setState({[type]:value})
       }
      }
      handle=()=>{
        const{name,age,hobby}=this.state
        console.log(name,age,hobby);
      }

     }


     const root=ReactDOM.createRoot(document.getElementById("app"))
     root.render(<App/>)


 </script>

</body>

</html>